<div ng-controller="StaffingCtrl as vm">
  <section class="content-header">
    <!-- Content Header (Page header) -->
    <h1>
    Staffing Report
    <small></small>
    </h1>
    <ol class="breadcrumb">
      <li>
<button ng-disabled="!vm.editable || vm.loading" class="btn btn-danger btn-xs pull-right" ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>      </li>
    </ol>
  </section>
  <!-- Main content -->
  <section class="content">
    
    <div class="box box-primary">
      <div class="box-header with-border">
        <h3 class="box-title">Staffing</h3>
        <small class="text-warning">{{vm.msg}}</small>
        <span ng-show="vm.errorMsg" class="label label-danger" style="font-size:15px"><b>{{vm.errorMsg}}</b></span>
        
                
      </div>
      <div class="box-body no-padding">
        <form class="form-inline">
          <table class="table table-bordered table-condensed">
            <tr>
              <th rowspan="2">Staffing</th>
              <th colspan="4">Non-Management (band7 and below)</th>
              <th colspan="4">Management (band6 and above)</th>
              <th colspan="4">Overall</th>
            </tr>
            <tr>
              <th style="width: 10px">MTD(Nos.)</th>
              <th>MTD(%)</th>
              <th>YTD(Nos.)</th>
              <th>YTD(%)</th>

              <th style="width: 10px">MTD(Nos.)</th>
              <th>MTD(%)</th>
              <th>YTD(Nos.)</th>
              <th>YTD(%)</th>

              <th style="width: 10px">MTD(Nos.)</th>
              <th>MTD(%)</th>
              <th>YTD(Nos.)</th>
              <th>YTD(%)</th>
            </tr>
            <tr ng-repeat="staff in vm.staffing">
              <td>{{staff.content}}</td>
              <td  ng-switch="staff.content=='Manning budget of this year'">
                <input ng-switch-when='false' type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band7.mtd" ng-change="vm.calculateYtd(staff)" />
                <div ng-class="{'has-error': vm.band7}" ng-switch-when='true'>
                     <input type="text" ng-disabled="!vm.aeditable" class="number-input form-control" ng-model="staff.band7.mtd" ng-change="vm.calculateYtd(staff)" />
                  <p class="help-block" ng-show="vm.band7">This field is required.</p>
                 
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>

              <td ng-switch="staff.content=='Manning budget of this year'">
                <input ng-switch-when='false' type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band6.mtd" ng-change="vm.calculateYtd(staff)" />
                <div ng-class="{'has-error': vm.band6}" ng-switch-when='true'>
                  <input type="text" ng-disabled="!vm.aeditable" class="form-control number-input" ng-model="staff.band6.mtd" ng-change="vm.calculateYtd(staff)" />
                  <p class="help-block" ng-show="vm.band6">This field is required.</p>
                </div>
              </td>
             
              <td></td>
              <td></td>
              <td></td>

              <td>{{staff.all.mtd}}</td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr ng-class="{'text-danger': vm.error}">
              <th>Separations</th>
              <th>{{vm.seperation.band7.mtd}}</th>
              <th></th>
              <th>{{vm.seperation.band7.ytd}}</th>
              <th></th>
              <th>{{vm.seperation.band6.mtd}}</th>
              <th></th>
              <th>{{vm.seperation.band6.ytd}}</th>
              <th></th>
              <th>{{vm.seperation.all.mtd}}</th>
              <th></th>
              <th>{{vm.seperation.all.ytd}}</th>
              <th></th>
            </tr>
            <tr ng-repeat="staff in vm.seperations">
              <td>{{staff.content}}</td>
              <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band7.mtd" ng-change="vm.calculateYtd(staff)" /></td>
              <td></td>
              <td>{{staff.band7.ytd}}</td>
              <td></td>

              <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band6.mtd" ng-change="vm.calculateYtd(staff)" /></td>
              <td></td>
              <td>{{staff.band6.ytd}}</td>
              <td></td>

              <td>{{staff.all.mtd}}</td>
              <td></td>
              <td>{{staff.all.ytd}}</td>
              <td></td>
            </tr>
            <tr>
              <th>End of the Month</th>
              <th>{{vm.end.band7.mtd}}</th>
              <th>{{vm.end.band7.mtdP *100 | percentage:2}}</th>
              <th>{{vm.end.band7.ytd}}</th>
              <th>{{vm.end.band7.ytdP*100 | percentage:2}}</th>
              <th>{{vm.end.band6.mtd}}</th>
              <th>{{vm.end.band6.mtdP*100| percentage:2}}</th>
              <th>{{vm.end.band6.ytd}}</th>
              <th>{{vm.end.band6.ytdP*100| percentage:2}}</th>
              <th>{{vm.end.all.mtd}}</th>
              <th>{{vm.end.all.mtdP*100| percentage:2}}</th>
              <th>{{vm.end.all.ytd}}</th>
              <th>{{vm.end.all.ytdP*100| percentage:2}}</th>
            </tr>
            <tr ng-repeat="staff in vm.others1">
              <td>{{staff.content}}</td>
              <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band7.mtd" ng-change="vm.calculateOthers1(staff)" /></td>
              <td>{{staff.band7.mtdP*100 | percentage:2}}</td>
              <td>{{staff.band7.ytd}}</td>
              <td>{{staff.band7.ytdP*100 | percentage:2}}</td>

              <td><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band6.mtd" ng-change="vm.calculateOthers1(staff)" /></td>
              <td>{{staff.band6.mtdP*100 | percentage:2}}</td>
              <td>{{staff.band6.ytd}}</td>
              <td>{{staff.band6.ytdP*100 | percentage:2}}</td>

              <td>{{staff.all.mtd}}</td>
              <td>{{staff.all.mtdP*100 | percentage:2}}</td>
              <td>{{staff.all.ytd}}</td>
              <td>{{staff.all.ytdP*100 | percentage:2}}</td>
            </tr>
            <tr ng-repeat="staff in vm.others2">
              <td>{{staff.content}}</td>
              <td colspan="4"><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band7.mtd" ng-change="vm.calculateYtd(staff)" /></td>
              <!-- <td>{{staff.mtdP}}</td>
              <td>{{staff.ytd}}</td>
              <td>{{staff.ytdP}}</td> -->

              <td colspan="4"><input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="staff.band6.mtd" ng-change="vm.calculateYtd(staff)" /></td>
              <!-- <td>{{staff.mtdP}}</td>
              <td>{{staff.ytd}}</td>
              <td>{{staff.ytdP}}</td> -->

              <td colspan="4">{{staff.all.mtd}}</td>
              <!-- <td>{{staff.all.mtdP}}</td>
              <td>{{staff.all.ytd}}</td>
              <td>{{staff.all.ytdP}}</td> -->
            </tr>
            <tr>
              <th><b>Staffing This Month</b></th>
              <th colspan="4">{{vm.monthSum.band7.mtd}}</th>
              <th colspan="4">{{vm.monthSum.band6.mtd}}</th>
              <th colspan="4">{{vm.monthSum.all.mtd}}</th>

            </tr>
          </table>
        </form>
        </div><!-- /.box-body -->
        </div><!--/.box  -->

        <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Staffing (Please check all these figures with Finance.)</h3>
                         <small class="text-warning">{{vm.msg}}</small>
                        <div class="pull-right">
<!--                             <button class="btn btn-danger btn-xs" ng-click="vm.saveTable2()"><i class="fa fa-check-square-o"></i>Submit</button>
 -->                        </div>
                    </div>
                    <div class="box-body table-responsive no-padding">
                        <table class="table table-hover">
                            <form class="form-inline">
                                <table class="table table-bordered table-condensed">
                                    <tr>
                                        <th>Type</th>
                                        <th>MTD. </th>
                                        <th>YTD. (Yearly Average)</th>
                                    </tr>
                                    <tr ng-repeat="ret in vm.result2">
                                        <td>{{ret.type}}</td>
                                        <td>
                                          <span ng-if="ret.type=='Revenue/EFTE'">$</span>
                                            <input type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.mtd" />
                                            <span ng-if="ret.percent">%</span>
                                            <span ng-if="ret.type=='Revenue/EFTE'">(USD)</span>
                                            

                                        </td>
                                        <td><span ng-if="ret.type=='Revenue/EFTE'">$</span>
                                          <input ng-if="ret.type!='Staff Ratio(Headcount/Available rooms)'" type="text" ng-disabled="!vm.editable" class="number-input" ng-model="ret.ytd"/>
                                          <span ng-if="ret.percent">%</span> <span ng-if="ret.type=='Revenue/EFTE'">(USD)</span></td>
                                    </tr>
                                </table>
                            </form>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
      </section>
      <!-- /.content -->
    </div>